<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">              
                    <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    <!-- 
                        <span data-toggle="tooltip" class="example-toggle"></span>
                        <span data-toggle="tooltip" class="example-copy"></span> 
                    -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">	
                    <div class="form-group m-form__group row">                  
                    <label class="col-form-label">名称：</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
                    </div>  
                    <label class="col-form-label">状态：</label>
						<div class="col-lg-2">
                            <el-select maxlength="20" v-model="searchForm.status" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option
                                    v-for="item in [{value:'0',label:'正常'},{value:'1',label:'冻结'}]"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
						</div>               
                        <b-button :pressed="false" variant="btn btn-primary font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="search()"><span><i
                        class="flaticon-search-magnifier-interface-symbol"></i><span>查 询</span></span></b-button>
                        <b-button :pressed="false" variant="btn btn-light font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="resetAll()">
                        <span><i class="flaticon2-refresh"></i><span>重 置</span></span></b-button>   
                        <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2 "
                        v-permission="{ action: '/oauthSysMode/add', effect: 'display' }"  
                        @click="addOauthSysMode">
                            <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                        </button>
                        <a class="btn btn-light-success font-weight-bold font-size-sm py-3 px-8 mr-2" 
                        title="导入子系统数据库数据"
                        v-permission="{ action: '/oauthSysMode/import', effect: 'display' }"
                        @click="importOauthSysMode">
                            <span><i class="fa flaticon-folder-3"></i><span> 导 入</span></span>
                        </a> 
                    </div>
                </div> 
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions--solid">
                    <div class="row">
                        <div class="col m--align-left">
                        </div>
                        <div class="col m--align-right">
                        
                        </div>
                    </div>
                    </div>
                </div>             
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" 
                stripe 
                border
                highlight-current-row :data="sysModeList"
                ref="enquiry"
                @selection-change="handleSelectionChange"
                :expand-row-keys="expands" 
                :row-key="getRowKeys" 
                @expand-change="expandRow"            
                @row-dblclick = "handleRowClick">                
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.subList" style="text-align: center;margin:auto;width: 80%;" align="center" :header-cell-style="{ background:'#fff',height:'20px',color:'#000000',}" >
                            <el-table-column prop="name" label="名称"  min-width="120" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="mode" label="模块标记" min-width="120" show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="status" show-overflow-tooltip label="状态" min-width="80">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status == 0">
                                        <span class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">正常</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 1">
                                        <span class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">冻结</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 2">
                                        <span class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">禁用</span>
                                    </div>
                                    <div v-else>
                                        <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
                                    </div>
                                </template>
                            </el-table-column> 
                            <el-table-column align="center" label="操作" fixed="right" min-width="120">
                                <template slot-scope="scopeSub">
                                    <!--scope.row当前行的对象-->
                                    <button
                                    v-permission="{ action: '/oauthSysModules/update', effect: 'display' }"  
                                    @click="updateOauthSysModules(scopeSub.row,scope.row)" class="btn btn-link" title="编辑资源模块"><span><i class="la la-pen-alt"></i></span>编辑资源模块</button>                                    
                                    <button v-if="scopeSub.row.status ==0" 
                                    v-permission="{ action: '/oauthSysModules/delete', effect: 'display' }"  
                                    @click="delOauthSysModules(scopeSub.row,scope.row)" class="btn btn-link-danger" title="冻结资源模块"><span><i class="far fa-trash-alt"></i><span>冻结</span></span></button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" show-overflow-tooltip label="隶属平台" min-width="100"></el-table-column>
                <el-table-column align="center" prop="status" show-overflow-tooltip label="状态" min-width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <span
                                class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">正常</span>
                        </div>
                        <div v-else-if="scope.row.status == 1">
                            <span
                                class="label label-lg label-light-success label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">冻结</span>
                        </div>
                        <div v-else-if="scope.row.status == 2">
                            <span
                                class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">禁用</span>
                        </div>
                        <div v-else>
                            <span
                                class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="icon" show-overflow-tooltip label="图标">
                    <template slot-scope="scope">
                        <i class="menu-icon text-dark-50" :class="scope.row.icon">                    
                        <span></span>
                        </i>
                    </template>
                </el-table-column>
                <!-- <el-table-column align="left" show-overflow-tooltip prop="createTime" label="创建日期" min-width="200">
                </el-table-column> -->
                <!-- <el-table-column align="left" prop="updateTime" label="修改日期" min-width="160"></el-table-column> -->
                <el-table-column align="center" label="操作" fixed="left" min-width="300">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <button @click="getOauthSysModeDetail(scope.row)" class="btn btn-link" title="详情">详 情</button>
                        <button class="btn btn-link" 
                        v-permission="{ action: '/oauthSysMode/update', effect: 'disabled' }"  
                        @click="updateOauthSysMode(scope.row)"> 
                            <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
                        </button>
                        <button class="btn btn-link-danger mr-2"
                        v-permission="{ action: '/oauthSysMode/delete', effect: 'disabled' }"  
                        @click="delOauthSysMode(scope.row)"> 
                            <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
                        </button>
                        <button @click="addOauthSysModules(scope.row)"
                        v-permission="{ action: '/oauthSysModules/add', effect: 'disabled' }"  
                        class="btn btn-link-success mr-2" title="创建资源模块">
                            <span><i class="la la-plus la-lg"></i><span>创建资源模块</span></span>
                        </button>

                        <button class="btn btn-link-primary mr-2"
                        title="导出该下面所有相关数据库数据及结构"
                        v-permission="{ action: '/oauthSysMode/down', effect: 'disabled' }"  
                        @click="downOauthSysMode(scope.row)"> 
                            <span><i class="flaticon-download"></i><span>导出</span></span>
                        </button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    hide-on-single-page   
                    @size-change="handleSizeChange"        
                    @current-change="handleCurrentChange"  
                    :current-page="pageNo"                
                    :page-sizes="[5, 10, 30, 50]"          
                    :page-size="pageSize"			  
                    layout="->,total, sizes, prev, pager, next, jumper"
                    :total="totalCount">		
                </el-pagination>
            </div>
        </div>
        <OauthSysModeFileUpload ref="oauthSysModeFileUploadRef" @change="search"></OauthSysModeFileUpload>
        <OauthSysModeAdd ref="oauthSysModeAddRef" @change="search"></OauthSysModeAdd><!--采用父窗口关闭传递的方法-->
        <OauthSysModeUpdate ref="oauthSysModeUpdateRef" @change="search"></OauthSysModeUpdate><!--采用父窗口关闭传递的方法-->
        <OauthSysModeDetail ref="oauthSysModeDetailRef"></OauthSysModeDetail>
        <OauthSysModulesAdd ref="oauthSysModulesAddRef" @change="search"></OauthSysModulesAdd><!--采用父窗口关闭传递的方法-->
        <OauthSysModulesUpdate ref="oauthSysModulesUpdateRef" @change="search"></OauthSysModulesUpdate><!--采用父窗口关闭传递的方法-->
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";

import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import OauthSysModeFileUpload from "@/view/oauth/oauth-sys-mode/oauth-sys-mode-file.vue";
import OauthSysModeAdd from "@/view/oauth/oauth-sys-mode/oauth-sys-mode-add.vue";
import OauthSysModeUpdate from "@/view/oauth/oauth-sys-mode/oauth-sys-mode-update.vue";
import OauthSysModeDetail from "@/view/oauth/oauth-sys-mode/oauth-sys-mode-detail.vue";
import OauthSysModulesAdd from "@/view/oauth/oauth-sys-mode/oauth-sys-modules-add.vue";
import OauthSysModulesUpdate from "@/view/oauth/oauth-sys-mode/oauth-sys-modules-update.vue";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating,downloadFileCallFn } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: {name:"",status:""},
            sysModeList: [],
            subList: [],
            expands: [],
            sels: [], //当前选框选中的值
            pageNo:1,      // 默认当前是第一页
            pageSize:5,    // 当前每页的数据是5条
            totalCount:0   // 总数默认为0
        }
    },
    components: {
        OauthSysModeAdd,
        OauthSysModeUpdate,
        OauthSysModeDetail,
        OauthSysModulesAdd,
        OauthSysModulesUpdate,
        OauthSysModeFileUpload,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "授权中心子系统" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        handleRowClick(row, event, column) {
            //点击行展开，enquiry为主表table的ref属性值
            this.$refs.enquiry.toggleRowExpansion(row);
        },
        initList() {
            showWating({ renderBody: "tableBody" });
            this.searchForm.usePageNo = true;//采用第几页进行分页（兼容）
            this.searchForm.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            this.searchForm.pageNo = this.pageNo;//开始的记录序号        
            apiUtil.query(process.env.VUE_APP_OAUTH_API+"/oauthSysMode/list", this.searchForm).then(({ data }) => {
                this.sysModeList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数 
                for(var i in this.expands){
                    this.reGetSubList(this.expands[i]);
                } 
            });
        },
        getRowKeys(row) {
            return row.id;
        },
        expandRow:function(row, expandedRows) {//展开与收缩事件
            let _this = this;
            if(_this.expands.indexOf(row.id) >= 0){//收缩事件                
                let newExpands=[];
                for(let i=0; i<this.expands.length; i++){
                    if(this.expands[i]!=row.id){
                        newExpands.push(this.expands[i]);
                    }
                }
                _this.expands=newExpands;
                return;
            }else{
                this.getSubList(row);//展开事件
            }
        },
        getSubList(row) {            
            //遍历主表dataList
            this.sysModeList.forEach((item, index) => {
                if(item.id == row.id){//判断当前展开的行      
                    showWating({renderBody:"tableBody"});          
                    //请求子表后台接口
                    var params = {};
                    apiUtil.post(process.env.VUE_APP_OAUTH_API + "/oauthSysModules/list/"+item.id, params).then(({ data }) => {
                        this.sysModeList[index].subList = data.data;//给结果集赋值                       
                        //如果需要默认展开所有行，将:row-key="getRowKeys"得到的Id添加到expands数组
                        //直接使用属性default-expand-all会使子表数据显示不出来，索性全部加到this.expands
                        this.expands.push(item.id)
                    });
                }                
            })
        },
        reGetSubList(id){
            //遍历主表dataList
            this.sysModeList.forEach((item, index) => {
                if(item.id == id){//判断当前展开的行    
                    showWating({renderBody:"tableBody"});          
                    //请求子表后台接口
                    var params = {};
                    apiUtil.post(process.env.VUE_APP_OAUTH_API + "/oauthSysModules/list/"+id, params).then(({ data }) => {
                        // this.sysModeList[index].subList = data.data;//给结果集赋值
                        //如果需要默认展开所有行，将:row-key="getRowKeys"得到的Id添加到expands数组
                        //直接使用属性default-expand-all会使子表数据显示不出来，索性全部加到this.expands
                        // this.expands.push(item.id);
                        this.$set(this.sysModeList[index], "subList", data.data);

                    });
                }                
            })
        },
        addOauthSysMode(){//新建
            this.$refs.oauthSysModeAddRef.showModal()
        },
        updateOauthSysMode(row){// 更新
            this.$refs.oauthSysModeUpdateRef.showModal(row.id);
        },
        delOauthSysMode(row){ // 删除
            // 删除前提示
            this.$confirm("确认删除记录吗?", "提示", {type: "warning",}).then(() => {
            apiUtil.delete(process.env.VUE_APP_OAUTH_API+"/oauthSysMode/delete?id="+row.id).then(data=>{
                if(data.data.success){
                handleAlert("删除成功", "success", 3);
                this.search();
                }else {
                handleAlert("删除失败", "error", 3);
                }
            });
            }).catch(()=>{});//注意这里，这里是重点！！！;        
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        addOauthSysModules(row) {
            console.log(row);
            this.$refs.oauthSysModulesAddRef.showModal(row.id,row.name);
        },
        updateOauthSysModules(row,parentRow){//编辑资源模块
            this.$refs.oauthSysModulesUpdateRef.showModal(row.id);
        },
        delOauthSysModules(row,parentRow) {//冻结资源模块
            this.$confirm('确定要冻结'+row.sys_modules_name, "提示", { type: "warning", }).then(() => {
                var params = { id: row.id};               
                apiUtil.delete(process.env.VUE_APP_OAUTH_API + '/oauthSysModules/delete', params).then(data => {
                    if (data.data.success) {
                        handleAlert("冻结成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("冻结失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;
        },
        getOauthSysModeDetail(row){
            this.$refs.oauthSysModeDetailRef.showModal(row.id);
        },
        downOauthSysMode(row){//导出
            console.log(row);
            this.$confirm("确定导出子系统："+row.name+"数据库数据?", "提示", {type: "warning",}).then(() => {
                let url = process.env.VUE_APP_OAUTH_API+'/oauthSysMode/export?id='+row.id; // 请求接口
                let method = "GET"; // 请求方式 GET或POST
                let fileName = row.name+".json"; // 下载后的文件名称
                var params = "name='test" // 后台接口需要的参数
                downloadFileCallFn(url, method, fileName,params);
            }).catch(()=>{});//注意这里，这里是重点！！！;   
        },
        importOauthSysMode(){
            this.$refs.oauthSysModeFileUploadRef.showModal();
        },
    }
};
</script>